<template>
	<view>
		<view class="waterfall-box h-flex-x h-flex-2">
			<view>
				<helang-waterfall v-for="(item,index) in leftList" :key="index" :params="item" tag="left" :index="index"
					@height="onHeight" @click="onClick" @collectTap="collectTap2"></helang-waterfall>
			</view>
			<view>
				<helang-waterfall v-for="(item,index) in rightList" :key="index" :params="item" @height="onHeight"
					@click="onClick" tag="right" :index="index" @collectTap="collectTap2"></helang-waterfall>
			</view>
		</view>
		<view class="load-txt">{{ajax.loadTxt}}</view>
	</view>
</template>

<script>
	import helangWaterfall from "@/components/helang-waterfall/helang-waterfall.vue"
	export default {
		components: {
			helangWaterfall
		},
		data() {
			return {
				pageCurrent: 1,
				pageSize: 4,
				leftList: [],
				rightList: [],
				leftHeight: 0,
				rightHeight: 0,
				
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows:4,
					// 页码
					page:1,
				},
			}
		},
		created() {
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.pageCurrent = 1;
			
			this.getForumList(2, 1, this.pageSize); //获取帖子
			
		},

		methods: {
			// 组件点击事件
			onClick(index, tag,item){
				console.log(index, tag,item);
				// 对应的数据
				if(tag == 'left'){
					console.log(this.leftList[index]);
				}else{
					console.log(this.rightList[index]);
				}
			},
			//点击分享  回调
			collectTap2(item) {
				// 调用跳转详情
				this.detailsW(item.item, item.index, item.type)
			},
			detailsW(item, idx, type) {
				this.$basejs.globaltoken()
				uni.navigateTo({
					url: '/pages/subpackage/find/share/share?forumId=' + item.forumId + '&page=' + this.upPage +
						'&task=' + this.task + '&pointDict=' + this.pointDict + '&index=' + idx + '&type=' + type
				})
			},
			
			//上拉加载
			pullUpLoading(){
				if(this.ajax.loadTxt == '没有更多了') return
				let pageCurrent = this.pageCurrent += 1
				this.pageCurrent = pageCurrent;
				this.getForumList(2, pageCurrent, this.pageSize); //获取帖子
			},
			// 按照高度加载瀑布流
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			getForumList(auditStatus, pageCurrent, pageSize) { //获取文章列表
				let _this = this;
				this.$cms.get(global.apiUrls.getForumList + '?auditStatus=' + auditStatus + '&keyword=' +
					'&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize + '&releaseTime=', {}).then(res => {
					// _this.list = res.data.result.records;
					let records = res.data.result.records;
					_this.addList(records)
				})

			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				console.log(res);

				if (!res || res.length < 1) {
					this.ajax.loadTxt = '没有更多了';
					return;
				}

				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];


				// 获取插入的方向
				let getDirection = (index) => {
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if (differ >= 600 && index < 3) {
						differVal = 1;
						return 'right';
					}

					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if (differ <= -600 && index < 3) {
						differVal = -1;
						return 'left';
					}

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if (differ >= 350 && index < 2) {
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if (differ <= -350 && index < 2) {
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i + differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}

				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if (getDirection(index) == 'left') {
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					} else {
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				// 将左右列表的数据插入，第一页时则覆盖
				if (this.ajax.page == 1) {
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				} else {
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}

				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				this.ajax.page++;
			},
		}
	}
</script>

<style>
</style>
